<template>
  <div class="login_container">
    <div class="login_content">
      <div class="login_left">
        <img src="../assets/images/1.jpg" />
        <div class="shade">
          <div class="shade_font">
            <h3>Days...</h3>
            <p>Get up every morning believing it is going to be a nice day!</p>
          </div>
        </div>
      </div>
      <div class="login_right">
        <el-form class="input_area" :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item prop="username" label="用户名">
            <el-input placeholder="请输入用户名" v-model="ruleForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item prop="password1" label="密码">
            <el-input placeholder="请输入密码" v-model="ruleForm.password1" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item prop="password2" label="确认密码">
            <el-input placeholder="请再次输入密码" v-model="ruleForm.password2" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item label="管理员权限" prop="limit">
            <el-select v-model="ruleForm.limit" placeholder="请选择管理员权限">
              <el-option label="普通管理员" value="普通管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="medium" @click="submitRegisterForm('ruleForm')">Register</el-button>
          <div class="tip">如果您已有登录账号，请<button @click="toLogin">登录</button></div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password2 !== '') {
            this.$refs.ruleForm.validateField('password2');
          } else {
            var param = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,}$/;
            if (!param.test(value)) {
              callback(new Error('密码至少1个大写字母，1个小写字母和1个数字'))
            } else {
              callback();
            }
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password1) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        // 这是登录表单的数据对象
        ruleForm: {
          username: '',
          password1: '',
          password2: '',
          limit: ''
        },
        // 这是表单的验证规则对象
        rules: {
          // 验证用户名是否合法
          username: [{
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 16,
              message: '用户名最少2个字符，最多16个字符',
              trigger: 'blur'
            }
          ],
          // 验证密码是否合法
          password1: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 18,
              message: '密码最少6个字符，最多18个字符',
              trigger: 'blur'
            },
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          password2: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'blur'
            },
            {
              validator: validatePass2,
              trigger: 'blur'
            }
          ],
          // 验证权限
          limit: [{
            required: true,
            message: '请选择管理员权限',
            trigger: 'change'
          }]
        }
      }
    },
    methods: {
      // 跳转到登录
      toLogin() {
        this.$router.push('/login')
      },
      // 提交表单
      submitRegisterForm(ruleForm) {
        this.$refs[ruleForm].validate(async (valid) => {
          if (valid) {
            const log = await this.$http.post('/ordering/user/register', this.ruleForm)
            if (log.status !== 200) {
              return this.$message.error('注册失败')
            } else if (log.data.error_code === 10000) {
              return this.$message.error(log.data.msg[0])
            } else {
              this.$message.success('注册成功');
              this.$router.push('/login')
            }
          } else {
            return false;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login_container {
    .login_content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 65%;
      height: 75%;
      background-color: pink;
      display: flex;

      .login_left {
        flex: 1;
        position: relative;

        .shade {
          background-color: rgba(0, 0, 0, .4);
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;

          .shade_font {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;

            h3 {
              font-size: 35px;
              margin-bottom: 20px;
            }

            p {
              font-size: 20px;
            }
          }
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .login_right {
        flex: 1;
        background-color: #fff;
        position: relative;

        .input_area {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-content: center;
          padding: 0 70px;

          label {
            display: block;
            margin: 30px 0 0 0;
            font-size: 16px;
            font-weight: 600;
            color: #00557f;
          }

          .el-form-item__error {
            font-size: 16px;
          }

          .el-input__inner {
            outline: none !important;
            border: none !important;
            border-bottom: 1px solid #00557f !important;
            border-radius: 0 !important;
            // margin-bottom: 20px;
            font-size: 16px;
            width: 100% !important;
            padding-left: 0;
          }

          .el-button--medium {
            width: 100% !important;
            height: 10% !important;
            font-size: 18px !important;
          }

          .el-select {
            width: 100% !important;
          }

          .tip {
            font-size: 16px;

            button {
              border: none;
              outline: none;
              color: #409EFF;
              padding-left: 5px;
              font-size: 16px;
              background: 0;
              cursor: pointer;
            }
          }


        }
      }
    }
  }
</style>
